---
title: Chat History for AI SDK
---

import { Steps, Step } from 'fumadocs-ui/components/steps';
import { Callout } from 'fumadocs-ui/components/callout';
import { InstallCommand } from "@/components/docs/install-command";

## Overview

assistant-cloud provides thread management and persistent chat history for applications built with the [AI SDK by Vercel](https://sdk.vercel.ai/). This guide shows you how to integrate cloud persistence into your AI SDK application.

## Prerequisites

<Callout type="info">
  You need an assistant-cloud account to follow this guide. [Sign up here](https://cloud.assistant-ui.com/) to get started.
</Callout>

## Setup Guide

<Steps>

<Step>

### Create a Cloud Project

Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-ui.com/) and from the settings page, copy:

- **Frontend API URL**: `https://proj-[ID].assistant-api.com`
- **Assistant Cloud API Key**: `sk_aui_proj_*`

</Step>

<Step>

### Configure Environment Variables

Add the following environment variables to your project:

```bash title=".env.local"
# Frontend API URL from your cloud project settings
NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com

# API key for server-side operations
ASSISTANT_API_KEY=your-api-key-here
```

</Step>

<Step>

### Install Dependencies

Install the required packages:

<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk"]} />

</Step>

<Step>

### Set Up the Cloud Runtime

Create a client-side AssistantCloud instance and integrate it with your AI SDK runtime:

```tsx title="app/chat/page.tsx"
"use client";

import { AssistantCloud, AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { ThreadList } from "@/components/assistant-ui/thread-list";
import { Thread } from "@/components/assistant-ui/thread";

export default function ChatPage() {
  const cloud = new AssistantCloud({
    baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
    anonymous: true, // Creates browser-session based user ID
  });

  const runtime = useChatRuntime({
    api: "/api/chat", // Your AI SDK endpoint
    cloud,
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
        <ThreadList />
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
}
```

</Step>

</Steps>

## Authentication

The example above uses `anonymous: true` which creates a browser session-based user ID. This is suitable for public demos or prototypes.

For production apps with user accounts, see the [Cloud Authorization](/docs/cloud/authorization) guide to persist threads per user or workspace.

## Next Steps

- Learn about [user authentication](/docs/cloud/authorization) for multi-user applications
- Explore [runtime hooks](/docs/api-reference/integrations/vercel-ai-sdk) and integration options
- Check out the [complete example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-cloud) on GitHub
